<template>
  <div>
    <div class="page-header-wrap">
      <Header @confirm="queryData" />
      <a-tabs
        v-model:activeKey="searchProp.status"
        @change="() => queryData(searchProp)"
      >
        <a-tab-pane key="1" tab="正常"></a-tab-pane>
        <a-tab-pane key="0" tab="下架"></a-tab-pane>
      </a-tabs>
    </div>
    <div class="page-content-wrap">
      <a-table
        :columns="columns"
        :data-source="resState.list"
        :pagination="pageInfo"
      >
        <template #title>
          <div class="table-header-wrap">
            <a-button type="primary" @click="showEdit">新增</a-button>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'imageThumb'">
            <a-image :width="80" :src="viewUrl + record.image" />
          </template>
          <template v-else-if="column.key === 'type'">
            <span>
              <a-tag v-if="record.type == 1" color="blue"> 单品 </a-tag>
              <a-tag v-else color="green">套餐</a-tag>
            </span>
          </template>
          <template v-if="column.key === 'originalPrice'">
            <span style="color: #999; text-decoration: line-through">
              ￥{{ record.originalPrice || 0 }}
            </span>
          </template>
          <template v-if="column.key === 'price'">
            <span style="color: red">￥{{ record.price || 0 }}</span>
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a-button type="link" @click="showEdit(record)">编辑</a-button>
              <a-button type="link" @click="showRemove(record)">删除</a-button>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <DrawerEdit
      v-model:visible="acState.editVisible"
      v-model:current="acState.current"
      @query="() => queryData(searchProp)"
    />
    <a-modal
      v-model:visible="acState.removeVisible"
      title="删除商品"
      :confirm-loading="acState.loading"
      @ok="handleRemove"
    >
      {{ acState.modalText }}
    </a-modal>
  </div>
</template>

<script setup>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue'
import { ref, reactive, onMounted, provide } from 'vue'
import Header from './components/Header.vue'
import DrawerEdit from './components/DrawerEdit.vue'
import { selectPageList, remove } from '@/api/product'
import { selectList as selectCateList } from '@/api/category'
import { usePager } from '@/hooks'
import { useActions } from '@/hooks/actions'
import settings from '@/config/settings'

const columns = [
  {
    title: '图片',
    dataIndex: 'imageThumb',
    key: 'imageThumb',
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '商品分类',
    dataIndex: 'cateName',
    key: 'cateName',
  },
  {
    title: '商品类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '原价',
    dataIndex: 'originalPrice',
    key: 'originalPrice',
  },
  {
    title: '优惠价',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '规格字典',
    dataIndex: 'sizeDictValue',
    key: 'sizeDictValue',
  },
  {
    title: '操作',
    key: 'action',
  },
]
const searchProp = reactive({
  status: '1',
})
const activeKey = ref('1')
const cateList = ref([])
provide('cateList', cateList)
const viewUrl = settings.viewUrl

const { pageInfo, queryData, resState } = usePager(selectPageList)
const { acState, showEdit, showRemove } = useActions()

/** 获取分类 */
const getCateList = async (name) => {
  const { data, code } = await selectCateList({ name })
  if (code !== 200) return
  cateList.value = data || []
}

const handleRemove = async () => {
  acState.loading = true
  const { code } = await remove({ id: acState.current.id })
  if (code !== 300) retutn
  acState.loading = false
  acState.removeVisible = false
  queryData(searchProp)
}

onMounted(async () => {
  getCateList()
  queryData(searchProp)
})
</script>

<style lang="less">
.page-header-wrap {
  .ant-tabs-nav {
    margin: 0;
  }
}
</style>
